import React from 'react';
import { Link } from 'react-router';

import Menu from 'antd/lib/menu';

import { URL_IMG } from '../config.jsx';

const styles = {
    header: {
        width: "100%",
        height: "6rem",
        backgroundColor: "rgb(66,79,164)"
    },
    leftIcon: {
        marginTop: "0.5rem",
        marginLeft: "0.5rem",
        float: "left",
        width: "1.8rem",
        height: "1.8rem",
        borderRadius: "50%"
    },
    leftBar: {
        fontSize:"23px",
        color:"white"
    },
    popupMenu: {
        marginLeft: "2.8rem",
        width: "30%",
        fontSize: "1rem",
        paddingTop: "0.7rem"
    },
    layout: {
        height: "3rem"
    },
    rightIcon: {
        color: "#fff",
        position: "absolute",
        top: "0.5rem",
        fontSize: "1.5rem",
        right: "0.5rem"
    },
    rightSearchControl: {
        position: "absolute",
        right: "0rem",
        height: "1.5rem",
        width: "calc( 70% - 3.2rem )",
        top:"0.5rem"
    },
    searchIcon: {
        color: "#fff",
        position: "absolute",
        fontSize: "1.5rem",
        marginLeft:"0.2rem",
        right: "0.5rem"
    },
    leftMenuRow:{
    	height: "2.1rem",
    	width: "100%",
    	paddingTop: ".4rem",
        paddingBottom: "2rem",
        paddingLeft: ".6rem",
        /*mozBoxShadow: "0px 0px 2px #D1D1D1",
        webKitBoxShadow: "0px 0px 2px #D1D1D1",*/
        boxShadow: "0px 0px 2px #D1D1D1",
    },
    leftImg:{
    	height: "1.6rem",
	    width: "1.6rem",
	    float: "left"
    },
    leftImgElm:{
    	height:"100%",
    	width:"100%",
    	borderRadius: "50%"
    },
    rightText:{
    	paddingLeft: "2.2rem"
    }
}

export default class HeaderBar extends React.Component {

    constructor(props) {
        super(props);
        this.state={key:""};
    }

    componentDidMount() {
        this.setState({key:this.props.searchText});
        var leftMenu = $("#leftBar");
    	if(leftMenu.css('display') !== 'none'){
            leftMenu.hide();
    	}
    }

    componentWillReceiveProps(nextProps) {
        this.setState({key:nextProps.searchText});
    }

    onInputChange(e) {
        this.setState({
            key:e.target.value
        })
    }
    onBtnSearch() {
        this.props.searchFunc(this.state.key);
    }
    
    onBtnShowBar() {
    	var leftMenu = $("#leftBar");
    	if(leftMenu.css('display') !== 'none'){
            $("#rightBar").hide();
            leftMenu.hide();
    	}
    	else
    	{
    		$("#rightBar").show();
    		leftMenu.show().css({"height":"100%"});
    	}
    }

	RightBarClick(){
		 $("#rightBar").hide();
		 $("#leftBar").hide();
	}
    render() {
        const _this = this;
        let menuItem = [];
        if (this.props.channels && this.props.channels.length > 0) {
            this.props.channels.forEach(function (item, i) {
                menuItem.push(
                	<div className="LeftMenuRow" style={styles.leftMenuRow} onClick={() => { _this.props.menuHandler(item.ID) } } key={i}>
                	   <div className="leftImg" style={styles.leftImg}>
                	      <img style={styles.leftImgElm} src={URL_IMG + item.ChannelIconUrl}/>
                	   </div>
                	   <div className="rightText" style={styles.rightText}>
                	      {item.Title}
                	   </div>
                	</div>
                	);
            });
        } else {
            menuItem.push("<div>Loading...</div>");
            //channel = 'Loading...';
        }
        
        let topMenu1 = {
            width: "calc(100% / 3)",
            float: "left",
            height: "2rem",
            marginTop: "1rem",
            fontSize: "0.8rem",
            color: "rgb(114,124,174)",
            textAlign: "center"
        };
        let topMenu2 = {
            width: "calc(100% / 3)",
            float: "left",
            height: "2rem",
            marginTop: "1rem",
            fontSize: "0.8rem",
            color: "rgb(114,124,174)",
            textAlign: "center"
        };
        let topMenu3 = {
            width: "calc(100% / 3)",
            float: "left",
            height: "2rem",
            marginTop: "1rem",
            fontSize: "0.8rem",
            color: "rgb(114,124,174)",
            textAlign: "center"
        };

        switch (this.props.sort) {
            case "0":
                topMenu1.borderBottom = "3px solid #fff";
                topMenu1.color = "#fff";
                break;
            case "1":
                topMenu2.borderBottom = "3px solid #fff";
                topMenu2.color = "#fff";
                break;
            case "2":
                topMenu3.borderBottom = "3px solid #fff";
                topMenu3.color = "#fff";
                break;
        }
      let leftMenuStyles = {
	      	leftbar:{
			    backgroundColor: "rgba(204, 204, 204, 9)",
			    width: "9.3rem",
			    position: "fixed",
			    zIndex: "1001",
			    display: "none",
	            color:"#3e3c3c"
	      	}
      }
       let rightBar = {
		    width: "100%",
		    height: "100%",
		    position: "fixed",
		    display:"none",
		    zIndex:"1000",
       };
        return (
            <div style={styles.header} id="headerbar">
               <div id="leftBar" style={leftMenuStyles.leftbar}>{menuItem}</div>
               <div id="rightBar" style={rightBar} onClick={this.RightBarClick}> </div>
                <div style={styles.layout}>
                    <div style={styles.leftIcon} onClick={this.onBtnShowBar}>
                    {
                        <i className="fa fa-arrow-right sidebar" style={styles.leftBar} aria-hidden="true"></i>
                    }
                    </div>
                    <div id="commonPopupMenu" style={styles.popupMenu}>
                    </div>
                    { this.props.isSearch && <Link to={"searchpage/"+this.props.isSearch+"/1/0"}> <i className="fa fa-search" aria-hidden="true" style={styles.rightIcon}></i></Link>}
                    { 
                        this.props.searchFunc && 
                        <div style={styles.rightSearchControl}>
                            <form onSubmit={(e)=>{e.preventDefault();return false;}} action="">
                            <input  type="search" id="search" name="search" value={this.state.key} onChange={this.onInputChange.bind(this)} style={{outline:"none",width:"calc(100% - 2.5rem)",paddingLeft: "5px"}}/><i onClick={this.onBtnSearch.bind(this)} className="fa fa-search" aria-hidden="true" style={styles.searchIcon}
                            ></i>
                            </form>
                        </div>
                    }
                </div>
                <div style={styles.layout}>
                    <div style={topMenu1} onClick={() => { this.props.sortHandler("0") } }>最新发布</div>
                    <div style={topMenu2} onClick={() => { this.props.sortHandler("1") } }>最热门话题</div>
                    <div style={topMenu3} onClick={() => { this.props.sortHandler("2") } }>最多点评</div>
                </div>
                
            </div>
        )
    }
}